<template>
  <div class="container">
    <div class="alertLabel">
      {{alertLabelText}}
    </div>
    <div class="heade">
      <div class="search">
        <p>
          <router-link to="/home">首页</router-link> > <router-link to="/buyCar">我要买车 </router-link> > <a href="javascript:void(0)">{{buyCarParams.car_style}}</a>
        </p>
        <div>
          <input type="text" v-model='inputVal' @keyup.enter="search" placeholder="请输入品牌车型">
          <i @click="search"></i>
        </div>
      </div>
      <div class="heade_con">
        <div class="carMainPic" v-bind:style="{
          'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + buyCarParams.car_main_pic + ') no-repeat center center',
          'backgroundSize': '100% auto'
        }">
          <!-- <img :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' +buyCarParams.car_main_pic" alt=""> -->
          <p class="license">{{buyCarParams.plate_number}}</p>
        </div>
        <div class="heade_con_r">
          <h2>{{buyCarParams.car_style}}</h2>
          <ul>
            <li class="tex">
              <h3>{{carInfos.registerDate}}</h3>
              <p>上牌时间</p>
            </li>
            <li class="box"></li>
            <li class="tex">
              <h3>{{carInfos.mileage}} 万公里</h3>
              <p>行驶里程</p>
            </li>
            <li class="box"></li>
            <li class="tex">
              <h3>{{carInfos.exhaust}}L</h3>
              <p>排量</p>
            </li>
            <li class="box"></li>
            <li class="tex">
              <h3>{{carInfos.storage}}</h3>
              <p>所在城市</p>
            </li>
          </ul>
          <div class="times">
            <p :class="stateClassNmae">{{this.stateTex}}</p>
            <div class="times_times">
              <div class="tim">
                <p style="margin-bottom:12px">开始时间 : {{startTimes}}</p>
                <p>结束时间 : {{endTimes}}</p>
              </div>
              <div class="countDown">
                <p style="margin-bottom:12px">{{tex}} :</p>
                <p class="ti">
                  {{countDown.days}}<span> 天</span>
                  {{countDown.hours}}<span> 时</span>
                  {{countDown.minutes}}<span> 分</span>
                  {{countDown.seconds}}<span> 秒</span>
                </p>
              </div>
            </div>
          </div>
          <p class="numbe" v-if="trfo"><span>{{carList1.tenderPersonNumbers}}</span>人出价</p>
          <p class="numbe" v-if="!trfo && IsStatus != '2'">起拍价 : <span>{{(carList1.bidSingle.auctionPrice/10000).toFixed(2)}}</span>万元</p>
          <div v-if="!trfo && IsStatus == '2'" class="numbeBox">
            <p class="l" style="line-height: 30px;" v-if="carList1.bidSingle.currentHighestPrice && carList1.bidSingle.currentHighestUser">当前最高价 : <span>{{(carList1.bidSingle.currentHighestPrice/10000).toFixed(2)}}</span>万元</p>
            <p class="l" v-else>当前最高价 : 暂无出价</p>
            <p class="r">起拍价 : <span>{{(carList1.bidSingle.auctionPrice/10000).toFixed(2)}}</span>万元</p>
          </div>
          <div class="Label">
            <div class="bid" v-if="trfo" @click="Bid()">
              <img src="../../../static/img/buyCar/details/buy_img_bid.png" alt="">
              <span>我要投标</span>
            </div>
            <div class="bid" v-if="!trfo" @click="Bidders()">
              <img src="../../../static/img/buyCar/details/buy_img_auction.png" alt="">
              <span>我要竞拍</span>
            </div>
            <div class="solicitude" @click="solicitudeFn">
              <img v-if="carList1.focus == '0'" src="../../../static/img/buyCar/details/buy_img_guanzhu_nor.png" alt="">
              <img v-else src="../../../static/img/buyCar/details/buy_img_guanzhu_sel.png" alt="">
              <span>{{carList1.focus == '0' ? '关注' : '已关注'}}</span>
            </div>
            <div class="telephone">
              <img src="../../../static/img/buyCar/details/buy_img_tel.png" alt="">
              <span>400-877-9737</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detailed">
      <ul>
        <li @click="chen('1')" style="backgroundColor:#ff6f3c;color:#fff;">车辆概要</li>
        <li @click="chen('2')">检测信息</li>
        <li @click="chen('3')" v-if="trfo">投标记录 ( {{ carList1.totalRecords}}条 )</li>
        <li @click="chen('4')" v-if="!trfo">竞拍记录 ( {{ carList1.totalRecords}}条 )</li>
      </ul>
    </div>
    <div :is="pages" :carList1='carList1' :userId='userLis.id'>
    </div>
  </div>
</template>
<script>
import page1 from '../../components/listList/VehicleOutline'
import page2 from '../../components/listList/container'
import page3 from '../../components/listList/biddingRecords'
import page4 from '../../components/listList/biddingRecords1'
export default {
  data () {
    return {
      IsStatus: '',
      stateClassNmae: 'state',
      alertLabelText: '',
      pages: 'page1',
      inputVal: '',
      buyCarParams: {},
      carList1: {},
      carInfos: {},
      stateTex: '',
      startTimes: '',
      endTimes: '',
      countDown: {
        days: '00',
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      tex: '距开始',
      trfo: true,
      userLis: '',
      userInfor: '',
      ifSolicitudeFn: true,
      blure: true
    }
  },
  created () {
    this.buyCarParams = this.$route.query
    this.getFinanceData()
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
    }
  },
  async mounted () {
    var res = await this.getFinanceData()
    res.data && res.data.state === 'SUCCESS' && this.isTim()
  },
  components: {
    page1,
    page2,
    page3,
    page4
  },
  methods: {
    alertLabelShow () {
      $('.alertLabel').eq(0).fadeIn(0)
      setTimeout(function () {
        $('.alertLabel').eq(0).fadeOut(0)
      }, 3000)
    },
    // 添加关注
    solicitudeFn () {
      // 获取当前URL
      let urls = window.location.href
      // 判断是否登陆
      if (this.userLis.id && this.userLis.id !== '') {
        let httpUrl = ''
        if (this.carList1.focus === '0') {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/addFoucus?x=' + new Date().getTime()
        } else {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/unsubscribe?x=' + new Date().getTime()
        }
        let _this = this
        // 读取本地
        let storage = window.sessionStorage
        let json = storage.getItem('WSKuserLis')
        let jsonObj = JSON.parse(json)
        if (jsonObj) {
          this.userLis = jsonObj.data.data.user
        }
        this.$http({
          url: httpUrl,
          params: {
            userId: this.userLis.id,
            carId: this.buyCarParams.id
          },
          headers: {'from': 'web'}
        }).then(r => {
          _this.getFinanceData()
          _this.ifSolicitudeFn = !_this.ifSolicitudeFn
        })
      } else {
        // 把当前url保存到本地
        let use = JSON.stringify(urls)
        let storage = window.sessionStorage
        storage.setItem('WSKpathHerf', use)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    // 参与投标
    Bid () {
      // 获取当前URL
      let urls = window.location.href
      this.getFinanceData()
      // 判断是否已登陆
      if (this.userLis.id) {
        // 车辆信息
        this.buyCarParams = this.$route.query
        // 判断是否已经开始投标
        if (this.carList1.bidSingle.status === '0') {
          // 判断此用户是否为车主
          if (this.userLis.id === this.buyCarParams.owner_id) {
            this.alertLabelText = '此车辆是您委托的'
            this.alertLabelShow()
          } else {
            this.buyCarParams = this.$route.query
            let x = this.buyCarParams
            this.$http({
              url: 'http://paimai.ucarcloud.cn/auctionCarCore/user/wetherParticipate?x=' + new Date().getTime(),
              params: {
                userId: this.userLis.id,
                carId: this.buyCarParams.id,
                type: '0'
              },
              headers: {'from': 'web'}
            }).then(r => {
              let newOpen = window.open('about:blank')
              // 判断是否参加过本车辆的投标 ‘0’ 代表没有
              if (r.data.data.wether === '0') {
                let routeData = this.$router.resolve({
                  path: '/buyCar/Bid',
                  name: '/buyCar/Bid',
                  query: x
                })
                // window.open(routeData.href, '_blank')
                // newOpen.location.href = routeData.href
                newOpen.location.replace(location.href.split('#')[0] + routeData.href)
                // this.$router.push({path: '/buyCar/Bid', name: '/buyCar/Bid', query: x})
              } else if (r.data.data.wether === '1') {
                let routeData = this.$router.resolve({
                  path: '/buyCar/BidOffer',
                  name: '/buyCar/BidOffer',
                  query: x
                })
                // window.open(routeData.href, '_blank')
                // newOpen.location.href = routeData.href
                newOpen.location.replace(location.href.split('#')[0] + routeData.href)
                // this.$router.push({path: '/buyCar/BidOffer', name: '/buyCar/BidOffer', query: x})
              }
            })
          }
        } else {
          // 判断  '未开始' 或 '已结束'
          // if (this.tex === '距开始') {
          //   this.alertLabelText = '投标尚未开始 ！'
          this.alertLabelShow()
          // } else {
          //   this.alertLabelText = '投标已结束 ！'
          //   this.alertLabelShow()
          // }
        }
      } else {
        // 把当前url保存到本地
        let use = JSON.stringify(urls)
        let storage = window.sessionStorage
        storage.setItem('WSKpathHerf', use)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    // 参与竞拍
    Bidders () {
      // let newOpen = window.open()
      // 获取当前URL
      let urls = window.location.href
      this.getFinanceData()
      // 判断是否登陆
      if (this.userLis.id) {
        // 车辆信息
        this.buyCarParams = this.$route.query
        // 判断是否已经开始竞拍
        if (this.carList1.bidSingle.status === '2') {
          // 判断此用户是否为车主
          if (this.userLis.id === this.buyCarParams.owner_id) {
            this.alertLabelText = '此车辆是您委托的'
            this.alertLabelShow()
          } else {
            let y = this.buyCarParams
            this.$http({
              url: 'http://paimai.ucarcloud.cn/auctionCarCore/user/wetherParticipate?x=' + new Date().getTime(),
              params: {
                userId: this.userLis.id,
                carId: this.buyCarParams.id,
                type: '1'
              },
              headers: {'from': 'web'}
            }).then(r => {
              let newOpen = window.open('about:blank')
              // 判断是否参加过本车辆的投标 ‘0’ 代表没有
              if (r.data.data.wether === '0') {
                let routeData = this.$router.resolve({
                  path: '/buyCar/Bidders',
                  name: '/buyCar/Bidders',
                  query: y
                })
                // newOpen.location = routeData.href
                // newOpen.location.href = routeData.href
                newOpen.location.replace(location.href.split('#')[0] + routeData.href)
                // window.open(routeData.href, '_blank')
                // this.$router.push({path: '/buyCar/Bidders', name: '/buyCar/Bidders', query: y})
              } else if (r.data.data.wether === '1') {
                let routeData = this.$router.resolve({
                  path: '/buyCar/BiddersOffer',
                  name: '/buyCar/BiddersOffer',
                  query: y
                })
                // newOpen.location = routeData.href
                // newOpen.location.href = routeData.href
                newOpen.location.replace(location.href.split('#')[0] + routeData.href)
                // window.open(routeData.href, '_blank')
                // this.$router.push({path: '/buyCar/BiddersOffer', name: '/buyCar/BiddersOffer', query: y})
              }
            })
          }
        } else {
          // 判断  '未开始' 或 '已结束'
          // if (this.tex === '距开始') {
          //   this.alertLabelText = '竞拍尚未开始 ！'
          this.alertLabelShow()
          // } else {
          //   this.alertLabelText = '竞拍已结束 ！'
          //   this.alertLabelShow()
          // }
        }
      } else {
        // 把当前url保存到本地
        let use = JSON.stringify(urls)
        let storage = window.sessionStorage
        storage.setItem('WSKpathHerf', use)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    search () {
      this.$router.push({path: '/buyCar', name: '/buyCar', params: {inputVals: this.inputVal}})
    },
    getFinanceData () {
      // 读取本地
      let storage = window.sessionStorage
      let json = storage.getItem('WSKuserLis')
      let jsonObj = JSON.parse(json)
      if (jsonObj) {
        this.userLis = jsonObj.data.data.user
      }
      this.buyCarParams = this.$route.query
      window.scrollTo(0, 0)
      return this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/getCarBidInfos?x=' + new Date().getTime(),
        params: {
          carId: this.buyCarParams.id,
          userId: this.userLis.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.IsStatus = r.data.data.bidSingle.status
        this.carList1 = r.data.data
        this.carInfos = this.carList1.carInfo
        this.startTimes = r.data.data.bidSingle.startTime.substring(0, 16)
        this.endTimes = r.data.data.bidSingle.endTime.substring(0, 16)
        switch (this.carList1.bidSingle.status) {
          case '0':
            this.stateTex = '投标中'
            this.trfo = true
            this.stateClassNmae = 'state1'
            break
          case '1':
            this.stateTex = '投 标成 功'
            this.trfo = true
            this.stateClassNmae = 'state'
            this.alertLabelText = '投标已结束 ！'
            break
          case '2':
            this.stateTex = '竞拍中'
            this.trfo = false
            this.stateClassNmae = 'state2'
            break
          case '3':
            this.stateTex = '竞 拍成 功'
            this.trfo = false
            this.stateClassNmae = 'state3'
            this.alertLabelText = '竞拍已结束 ！'
            break
          case '4':
            this.stateTex = '竞 拍失 败'
            this.trfo = false
            this.stateClassNmae = 'state3'
            this.alertLabelText = '竞拍已结束 ！'
            break
          case '5':
            this.stateTex = '等 待竞 拍'
            this.trfo = false
            this.stateClassNmae = 'state3'
            this.alertLabelText = '竞拍尚未开始 ！'
            break
          case '6':
            this.stateTex = '投 标失 败'
            this.trfo = true
            this.stateClassNmae = 'state'
            this.alertLabelText = '投标已结束 ！'
            break
          case '7':
            this.stateTex = '等 待投 标'
            this.trfo = true
            this.stateClassNmae = 'state'
            this.alertLabelText = '投标尚未开始 ！'
            break
          default:
            this.stateTex = ''
            break
        }

        return r
      })
    },
    isTim () {
      let _this = this
      let endDate = _this.carList1.bidSingle.startTime
      let serverTim = _this.carList1.serverTime
      // 服务器时间
      let newSetDa = new Date(Date.parse(serverTim.replace(/-/g, '/'))).getTime()
      // 开始时间
      let newEndDa = new Date(Date.parse(endDate.replace(/-/g, '/'))).getTime()
      // 差
      let cha = newEndDa - newSetDa
      var inter = setInterval(async function () {
        cha -= 1000
        if (cha < 0) {
          if (_this.blure) {
            await _this.getFinanceData()
            _this.tex = '距结束'
            endDate = _this.carList1.bidSingle.endTime
            newEndDa = new Date(Date.parse(endDate.replace(/-/g, '/'))).getTime()
            newSetDa = new Date(Date.parse(serverTim.replace(/-/g, '/'))).getTime()
            cha = newEndDa - newSetDa
            // _this.getFinanceData()
            if (cha < 0) {
              cha = 0
            }
            _this.blure = false
          } else {
            cha = 0
            clearInterval(inter)
            setTimeout(function () {
              _this.getFinanceData()
            }, 10)
          }
        }
        // 计算出相差天数
        var days = Math.floor(cha / (24 * 3600 * 1000)) >= 10 ? Math.floor(cha / (24 * 3600 * 1000)) : '0' + Math.floor(cha / (24 * 3600 * 1000))
        // 计算出小时数
        var leave1 = cha % (24 * 3600 * 1000)
        var hours = Math.floor(leave1 / (3600 * 1000)) >= 10 ? Math.floor(leave1 / (3600 * 1000)) : '0' + Math.floor(leave1 / (3600 * 1000))
        // 计算相差分钟数
        var leave2 = leave1 % (3600 * 1000)
        var minutes = Math.floor(leave2 / (60 * 1000)) >= 10 ? Math.floor(leave2 / (60 * 1000)) : '0' + Math.floor(leave2 / (60 * 1000))
        // 计算相差秒数
        var leave3 = leave2 % (60 * 1000)
        var seconds = Math.round(leave3 / 1000) >= 10 ? Math.round(leave3 / 1000) : '0' + Math.round(leave3 / 1000)
        _this.countDown = {
          days: days,
          hours: hours,
          minutes: minutes,
          seconds: seconds
        }
      }, 1000)
    },
    chen (x, ev) {
      this.pages = 'page' + x
      let eve = ev || window.event
      let tar = eve.target || eve.srcElement
      let lis = tar.parentNode.children
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.backgroundColor = ''
        lis[i].style.color = '#333'
      }
      tar.style.backgroundColor = '#ff6f3c'
      tar.style.color = '#fff'
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  .alertLabel{
    display: none;
    width: 260px;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    z-index: 10001;
  }
  .heade{
    .search{
      // width: 1200px;
      // overflow: hidden;
      height: 75px;
      line-height: 75px;
      &>p{
        float: left;
        font-size: 14px;
        color: #666;
        margin-left: -150px;
        width: 600px;
        height: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &>a{
          color: #666;
          &:hover{
            color: #ff6f3c;
          };
        };
      }
      &>div{
        float: right;
        height: 38px;
        width: 340px;
        border: 1px solid #e3e3e3;
        margin-top: 20px;
        line-height: 0;
        i{
          display: block;
          float: right;
          width: 38px;
          height: 20px;
          background: url('../../../static/img/buyCar/buy_search.png') no-repeat 45% 1px;
          cursor: pointer;
          border-left: 2px solid #e3e3e3;
          margin-top: 8px;
        }
        input{
          width: 290px;
          height: 100%;
          padding-left: 10px;
          font-size: 14px;
          color: #333;
          &::-webkit-input-placeholder,&:-moz-placeholder,&::-moz-placeholder,&:-ms-input-placeholder {
              color: #999;
          }
        }
      }
    }
    .heade_con{
      overflow: hidden;
      margin-bottom: 30px;
      .carMainPic{
        float: left;
        width: 600px;
        height: 400px;
        position: relative;
        background-size: 100% auto !important;
        img{
          width: 100%;
          height: 100%;
        }
        p{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          background: rgba(0,0,0,0.6)
        }
      }
      .heade_con_r{
        float: right;
        width: 565px;
        h2{
          font-size: 24px;
          line-height: 30px;
          color: #333;
          height: 62px;
          overflow: hidden;
        }
        &>ul{
          overflow: hidden;
          .tex{
            float: left;
            width: 138px;
            text-align: center;
            h3{
              margin: 30px 0 16px;
              font-size: 18px;
              color: #333;
            }
            p{
              margin: 0 0 30px 0;
              font-size: 14px;
              color: #999;
            }
          }
          .box{
            height: 32px;
            border-left: 2px solid #e3e3e3;
            width: 0px;
            float: left;
            margin-top: 38px;
          }
        }
        .times{
          overflow: hidden;
          padding-top: 10px;
          .state{
            background: #fdc125;
            color: #fff;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            float: left;
          }
          .state1{
            background: #fdc125;
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            // padding: 16px;
            font-size: 18px;
            text-align: center;
            float: left;
          }
          .state2{
            background: #ff6f3c;
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            // padding: 16px;
            font-size: 18px;
            text-align: center;
            float: left;
          }
          .state3{
            background: #ff6f3c;
            color: #fff;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            padding: 16px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            float: left;
          }
          .times_times{
            float: left;
            height: 80px;
            background: #fafafa;
            width: 484px;
            padding: 20px 0 20px 20px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: left;
            .tim{
              float: left;
            }
          }
          .countDown{
            float: right;
            padding-right: 20px;
            .ti{
              color: #ff6f3c;
              font-size: 18px;
              span{
                color: #333;
                font-size: 14px;
              }
            }
          }
        }
        .numbe{
          margin: 40px 0 30px;
          font-size: 16px;
          color: #333;
          span{
            font-size: 20px;
            color: #ff6f3c;
          }
        }
        .numbeBox{
          overflow: hidden;
          margin: 30px 0 20px;
          height: 40px;
          line-height: 40px;
          .l{
            float: left;
            span{
              font-size: 30px;
              color: #ff6f3c;
            }
          }
          .r{
            float: right;
            // margin-top: 14px;
            span{
              color: #ff6f3c;
            }
          }
        }
        .Label{
          overflow: hidden;
          .bid{
            width: 190px;
            height: 50px;
            background: #ff6f3c;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            float: left;
            cursor: pointer;
            img{
              margin-top: 14px;
              vertical-align: -4px;
              margin-right: 10px;
              width: 22px;
              height: 22px;
            }
          }
          .solicitude{
            float: left;
            cursor: pointer;
            width: 144px;
            height: 50px;
            background: #fff8f6;
            border-radius: 5px;
            color: #ff6f3c;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #ff6f3c;
            margin: 0 19px 0;
            img{
              margin-top: 13px;
              vertical-align: -4px;
              margin-right: 10px;
              width: 24px;
              height: 24px;
            }
          }
          .telephone{
            float: left;
            cursor: pointer;
            width: 190px;
            height: 50px;
            background: #fdc125;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            img{
              margin-top: 14px;
              vertical-align: -5px;
              margin-right: 10px;
              width: 20px;
              height: 24px;
            }
          }
        }
      }
    }
  }
  .detailed{
    overflow: hidden;
    height: 60px;
    line-height: 60px;
    background: #fafafa;
    border-top: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #ff6f3c;
    border-left: 1px solid #e3e3e3;
    width: 1198px;
    ul{
      li{
        width: 180px;
        float: left;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
